<template>
  <div class="product-detail-wrap">
    <div class="nav-wrap">
			<div class="title" v-if="$route.params.classify">{{$route.params.classify}}</div>
      <span @click.stop.prevent="handleshowCatalog" class="iconfont icon-fenlei"></span>
			<div class="right">
				<span @click.stop.prevent="danmuToggle" class="iconfont icon-danmu" :class="barrageShow ? 'barrageShow' : ''"></span>
				<div class="comeback-text" @click.stop.prevent="handleBack">退出</div>
			</div>
		</div>
		<!-- 全部物件全部照片 -->
		<div class="list-wrap">
			<div class="prev" @click="handlePrev" v-if="showPrevArrow"><span class="iconfont icon-pasttime"></span></div>
			<div class="next" @click="handleNext" v-if="showNextArrow"><span class="iconfont icon-futuretime"></span></div>
			<div class="indexNum" v-if="imgurls.length > 0">{{currIndex + 1}}/{{imgurls.length}}</div>
			<div class="img-wrap" >
				<img :src="imgSrc" v-show="showImg" :class="showImg ? 'showImg' : 'hideImg'"/>
				<img :src="imgSrc" v-show="!showImg" :class="!showImg ? 'showImg' : 'hideImg'"/>
			</div>
		</div>
    <!-- 物件文本信息 -->
    <div :class="['info-wrap', {'silde-up': sildeToggle, 'silde-down': !sildeToggle} ]">
      <div class="arrow" @click="showInfoText"><i class="iconfont icon-small-arrow"
          :class="{'arrowDown': sildeToggle}"></i></div>
      <div class="title" v-if="listItem && imgurls.length > 0">{{listItem.get(imgurls[currIndex]).name}}:</div>
      <p :class="['text-info', {'text-wrap': sildeToggle, 'text-nowrap': !sildeToggle}]" v-if="listItem && imgurls.length > 0">{{listItem.get(imgurls[currIndex]).remarks}}</p>
    </div>

		<!-- 全部展品 -->
    <div v-if="showAllProduct" class="allProduct-wrap">
      <div class="allProduct-cen">
        <div class="header">
					<div class="title">{{$route.params.classify}}<span class="count">共 {{listData.length}} 件</span></div>
					<span class="iconfont icon-publish-cancel" @click="handleShowProduct"></span>
				</div>
        <ul class="allProduct-list">
					<li class="allProduct-list-item" v-for="(item, index) of listData" :key="index" @click="handleClickProduct(item)" v-lazy-container="{ selector: 'img'}">
            <img :data-src="imgProcess(item)" :data-loading="require('./assets/loading.gif')" >
          </li>
        </ul>
      </div>
		</div>
		
		<div v-show="showCatalog" class="catalog-wrap">
			<ul  class="catalog-cen">
				<li class="item-topbg"></li>
				<li v-for="(item, index) of catalogData" :key="index" class="menuImg" @click.stop.prevent="handleClickCatalog(item)" >
					<img :src="item.menuImgUrl" class="menuImg">
				</li>
			</ul>
			<div class="blank" @click.stop.prevent="handlehidden"></div>
		</div>
		
    <!-- 评论input -->
    <div class="input-wrap">
      <span class="iconfont icon-fenleizhanpin" @click="handleShowProduct"></span>
      <input v-model="inputValue" class="input">
      <div class="text" @click="handlePostComment">发送</div>
    </div>
		
		<!-- 弹幕 -->
		<y-barrage v-if="barrageShow && listItem &&  imgurls.length > 0" class="barrage" :barrageReleaseValue="barrageReleaseValue" 
			:barrageKid="listItem.get(imgurls[currIndex]).kid" :key="listItem.get(imgurls[currIndex]).kid"></y-barrage>
			
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
	import { VueLazyload } from 'vue-lazyload'
	import YLoadMoreRemote from '../../components/load-more-remote';
	import YBarrage from './components/barrage'
  export default {
    components: {
      YLoadMoreRemote,
			VueLazyload, YBarrage
		},
    data() {
      return {
        sildeToggle: false, 	// 文本信息显示隐藏开关
        showCatalog: false,   // 分类列表显示隐藏开关
        barrageShow: true,		// 弹幕显示隐藏开关
        showAllProduct: false,		// 当前分类全部展品显示隐藏开关
				listData: [],					// 当前分类全部展品数据
				catalogData: [],			// 分类数据
				listItem: new Map(),
				imgurls: [],					// 当前分类所有图片数据
				currIndex: 0,					// 当前显示图片index
				showImg: true,
				inputValue: '',				// 发布框文本
				barrageReleaseValue: '',			// 传给弹幕新发布的文本
				showPrevArrow: false,				// 上一页显示隐藏开关
				showNextArrow: true,				// 下一页显示隐藏开关
      }
		},

		computed: {
			imgSrc() {
				this.showImg = this.currIndex % 2;
				return this.imgurls[this.currIndex];
			},
		},
	
    methods: {
			// 处理当前分类数据  
      handleLoaded(list) {
				this.listData = [];
				this.listData.push(...list);
				let index = 0;
				this.listItem = new Map();
        for (let item of this.listData) {
					let imgs = item.imgUrl.split('@@');
          for (let imgUrl of imgs) {
            index++;
						this.listItem.set(`${imgUrl},${item.kid}`, item);
          }
				}
				this.getForImgData(); 	// 创建当前分类下所有图片数组
			},

			getForImgData() {
				this.imgurls = [...this.listItem.keys()];
				if (this.imgurls.length === 1) {
					this.showNextArrow = false;
				}
			},

			// 点击上一页 
			handlePrev() {
				this.currIndex--;
				if (this.currIndex > 0) {
					this.showPrevArrow = true;
					this.showNextArrow = true;
				} else {
					this.showPrevArrow = false;  // 当显示当前图片为第一张图时 不显示Prev按钮
					this.showNextArrow = true;
				}
			},

			handleNext() {
				this.currIndex++
				if (this.currIndex !== this.imgurls.length - 1) {
					this.showPrevArrow = true;
				} else {
					this.showNextArrow = false; 		// 当显示当前图片为最后一张图时 不显示Next按钮
					this.showPrevArrow = true;
				}
			},

			imgProcess(item) {
				let index = item.imgUrl.split('@@')[0].indexOf('/watermark');
				return `${item.imgUrl.split('@@')[0].slice(0, index)}/resize,m_lfit,h_0,w_100`
			},

			// 点击全部展品跳转到相应图片
      handleClickProduct(item) {
        let clickImg = `${item.imgUrl.split('@@')[0]},${item.kid}`;
				this.currIndex = this.imgurls.indexOf(clickImg);
				this.showAllProduct = !this.showAllProduct;
				if (this.currIndex > 0) {
					this.showPrevArrow = true; 
					this.showNextArrow = true; 
					if (this.currIndex === this.imgurls.length - 1) { // 最后一张图片隐藏右箭头
						this.showNextArrow = false; 
					}
				} else {
					this.showPrevArrow = false;
					this.showNextArrow = true;  // currIndex为0时 显示右箭头
					if (this.currIndex === this.imgurls.length - 1) {  // currIndex为0 切只有一张图示 不显示右箭头
						this.showNextArrow = false; 
					}
				}
			},
			
      showInfoText() {		// 点击展开收缩文本
        this.sildeToggle = !this.sildeToggle;
      },
			
			handleshowCatalog() {		// 点击显示隐藏分类
				this.showCatalog = true;
      },
			
			danmuToggle() {			// 弹幕显示隐藏
        this.barrageShow = !this.barrageShow;
			},
			
      handleShowProduct() {			// 全部展品显示隐藏
				this.showAllProduct = !this.showAllProduct;
			},

			handlehidden() {		// 点击蒙层隐藏分类列表
				this.showCatalog = false;
			},
			
			handleClickCatalog(item) {		// 点击分类刷新页面数据
				this.$router.replace(`/product-detail/${item.kid}/${item.name}`);
				this.sildeToggle = false;
				this.showCatalog = false;
				this.barrageShow = true;
				this.currIndex = 0;
				this.showPrevArrow = false;
				this.showNextArrow = true;
				this.inputValue = '',
				this.getClassifyList();
			},

			handleBack() {
				this.$router.replace('/catalog');
			},

			handlePostComment() { 		// 发布评论
				let params = {
					content: this.inputValue,
					targetKid: `${this.listItem.get(this.imgurls[this.currIndex]).kid}`,
					targetType: 'museumThing',
					auditFlag: 1,
				}
				this.$http.post(`/platform-behavior/v1/pt/comment-info`, params).then(() => {
					this.barrageReleaseValue = this.inputValue;
					this.inputValue = '';
				});
			},

			async getClassifyList() {
				let config = {url: `/lovelorn/v1.3/pt/museum-things/action/classifyList`,	
					params: {classifyKid: this.$route.params.kid, pageNo: 1,  pageSize: 500}
				}
				let listRes  = await this.$http(config)
				let list = listRes.data.data.entities;
				this.handleLoaded(list);
			},
			
			async getCatalogRes() {
				let catalogRes = await this.$http.get(`/lovelorn/v1.3/pb/museum-classifys/action/list`, {params: { pageSize: 20 }});
				this.catalogData = catalogRes.data.data.entities;
			}
		},
		created() {
			this.getClassifyList();
			this.getCatalogRes();
		},
  }

</script>
<style>
  .product-detail-wrap {
		height: 100vh;
    & .nav-wrap {
      height: 1.28rem;
      background: #fff;
      color: #bc9f72;
      font-size: 0.42rem;
			position: relative;
			padding-top: 0.4rem;

			& .right {
				height: 0.88rem;
				line-height: 0.88rem;
				position: absolute;
				right: 0;
				top: 0.4rem;
				display: flex;
				align-items: center;
				z-index: 2;

				& .comeback-text {
					font-size: 0.32rem;
					margin-left: 0.2rem;
					color: #65461e;
					padding-left: 0.2rem;
					padding-right: 0.3rem;
				}
			}

      & .title {
				position: absolute;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 0.88rem;
        font-size: 0.32rem;
				color: #65461e;
				z-index: 1;
      }

      & .icon-fenlei {
				position: absolute;
				left: 0;
				top: 0.4rem;
				z-index: 2;
				line-height: 0.88rem;
				padding: 0 0.3rem;
				height: 0.88rem;
      }

      & .icon-danmu {
        font-size: 0.4rem;
        padding-left: 0.3rem;
				padding-right: 0.1rem;
				color: #999;
				&.barrageShow {
					color: #65461e;
				}
      }
    }

    & .list-wrap {
			width: 100%;
      height: calc(100% - 0.88rem - 1.26rem -0.98rem -0.4rem);
			background: url('./assets/swiper-bg.png') no-repeat center;
      background-size: cover;
			position: relative;

			&.listWarpH {
				/* height: calc(100% - 0.88rem - 1.26rem -0.98rem -0.44rem); */
			}

			& .prev, & .next {
				position: absolute;
				bottom: 1.5rem;
				z-index: 2;
				width: 0.7rem;
				height: 0.7rem;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 0.34rem;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 0.46rem;
			}

			& .prev {
				left: 0.3rem;
			}

			& .next {
				right: 0.3rem;
			}

			& .indexNum {
				position: absolute;
				left: 50%;
				bottom: 0.6rem;
				margin-left: -0.55rem;
				width: 1.1rem;
				height: 0.3rem;
				border-radius: 0.15rem;
				background: rgba(0,0,0,0.4);
				color: #fff;
				z-index: 2;
				font-size: 0.22rem;
				text-align: center;
			}
		}

    & .img-wrap {
      height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: left 0.5s;
			& img {
				opacity: 1;
				display: block;
				transition: display 0.5s;
				max-height: 100%;
				object-fit: fill;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				&.showImg {
					display: block;
				}

				&.hideImg {
					display: none;
				}
			}
    }

    & .info-wrap {
      position: absolute;
      z-index: 2;
      bottom: 0.99rem;
      left: 0;
      right: 0;
      width: 100%;
      height: 1.26rem;
      background: url('./assets/page-bg.png') repeat left top;
      background-size: cover;
      color: #65461e;
      padding: 0.2rem 0.3rem;
      transition: height 0.5s;

      &.silde-up {
        height: 4.48rem;
      }

      &.silde-down {
        height: 1.26rem;
      }

      & .arrow {
        position: absolute;
        top: -0.38rem;
        right: 0.4rem;
        width: 1.3rem;
        height: 0.4rem;
        background: url('./assets/product-arrow-bg.png') repeat center;
        background-size: cover;
        display: flex;
        justify-content: center;

        & .icon-small-arrow {
          font-size: 0.14rem;
          line-height: 0.4rem;
          text-align: center;
          transform: rotateX(180deg);

          &.arrowDown {
            transform: rotateX(0deg);
          }
        }
      }

      & .title {
        font-size: 0.32rem;
        font-weight: 700;
      }

      & .text-info {
        font-size: 0.28rem;
        text-align: justify;
        line-height: 0.4rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 1;
        transition: height 0.5s;
        height: 0.4rem;

        &.text-wrap {
          height: 3.6rem;
          overflow: scroll;
          -webkit-line-clamp: inherit;
        }

        &.text-nowrap {
          height: 0.4rem;
          overflow: hidden;
          -webkit-line-clamp: 1;
        }
      }
    }

    & .input-wrap {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 0.98rem;
      border-top: 1px solid #e0dcde;
      background: #fff;
      color: #65461e;
      display: flex;
      justify-content: space-between;
      align-items: center;

      & .text {
        font-size: 0.3rem;
				flex: 0 0 1.2rem;
				padding: 0.1rem 0.3rem 0.1rem 0.24rem;
      }

      & .icon-fenleizhanpin {
        padding: 0 0.24rem 0 0.3rem;
        font-size: 0.4rem;
        flex: 0 0 0.95rem;
      }

      & .input {
        width: calc(100% - 1.2rem -0.95rem);
        background: #f8f8f8;
        border-radius: 0.22rem;
        height: 0.7rem;
        line-height: 0.7rem;
				color: #65461e;
				font-size: 0.28rem;
				padding: 0 0.16rem;
      }
    }

    & .barrage {
      position: absolute;
      z-index: 3;
      top: 1.24rem;
      left: 0;
      right: 0;
    }

    & .allProduct-wrap {
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      /* 全部物件 zindex 4 */
      z-index: 4;

      & .allProduct-cen {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70%;
        width: 100%;
        background: url('./assets/page-bg.png') repeat left top;
        background-size: cover;

        & .header {
					width: 100%;
					padding-left: 0.5rem; 
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 0.3rem;

					& .title {
						padding-top: 0.4rem;
						font-size: 0.42rem;
						color: #715636;
						& span {
							font-size: 0.28rem;
							color: #bc9f72;
							margin-left: 0.1rem;
						}
					}
          & .icon-publish-cancel {
            padding: 0.26rem 0.3rem;
            font-size: 0.22rem;
            color: #715636;
          }
        }

        & .allProduct-list {
          margin: 0 0.5rem;
          height: 80%;
          overflow: scroll;
					-webkit-overflow-scrolling:touch;

          & .allProduct-list-item {
            width: 31%;
            height: 1.5rem;
            overflow: hidden;
            background: #aaa;
            margin-bottom: 0.1rem;
						margin-right: 3%;
						display: inline-flex;
						background: #fff;

            &:nth-child(3n) {
              margin-right: 0;
            }

            & img {
							margin: 0 auto;
              /* width: 2.1rem;
              height: 1.5rem; */
            }
          }
        }
      }
    }

		& .catalog-wrap {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 4;
			background: rgba(0,0,0,0.5);
			display: flex;
			flex-direction: row;

			& .blank {
				width: calc(100% - 5.5rem);
				height: 100%;
			}

			& .catalog-cen {
				width: 5.5rem;
				height: 100%;
				overflow: scroll;
				padding: 1.2rem 0.3rem 0.5rem;
				background: url('./assets/page-bg.png') repeat left top;
				background-size: cover;
				-webkit-overflow-scrolling:touch;

				& .item-topbg {
					width: 5.5rem;
					height: 1.48rem;
					background: url('./assets/topbg.png') repeat center top;
					background-size: cover;
					position: absolute;
					top: 0;
					left: 0;
				}

				& .menuImg {
					width: 4.5rem;
					height: 1.4rem;
					overflow: hidden;
					cursor: pointer;
					margin-bottom: 0.2rem;
					

					& img {
						width: 4.5rem;
					height: 1.4rem;
					overflow: hidden;
					}
				}

			}
		}
  }

</style>
